<template>

    <div class="app-container" v-loading="loading">
        <el-row :gutter="10">
         <el-col :span="19">
             <common-container title="信审批复建议">
                 <div class="suggestionInfo">
                     <div class="apprvalStatus flex-xy-center"
                          :class="[detailInfo.approvalStatus==4 ?'active1':'',detailInfo.approvalStatus==5?'active2':'',detailInfo.approvalStatus==6?'active3':'']">
                       <span v-if="detailInfo.rejectionMark==1">批复建议被驳回</span>
                       <span v-else>{{ detailInfo.approvalStatus|creditSuggestionApprovalStatus }}</span>
                     </div>
                     <el-form ref="form" label-width="auto" label-position="right">
                         <el-form-item label="信审批复建议:" prop="approval">
                             {{ detailInfo.approval|creditSuggestionApproval }}
                         </el-form-item>
                         <div style="margin-bottom: 20px">
                             <p class="quota">信审额度:</p>
                             <div class="table-title-wrap flex-row">
                                 <p class="statisticInfo">申请总台数: <span>{{ detailInfo.application }}</span></p>
                                 <p class="statisticInfo">通过总台数: <span>{{ detailInfo.pass }}</span></p>
                                 <p class="statisticInfo">拒绝总台数: <span>{{ detailInfo.refuse }}</span></p>
                             </div>
                             <el-table
                                 :data="detailInfo.cars"
                                 :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                                 <el-table-column
                                     align="center"
                                     prop="vehicleManufacturers"
                                     label="车辆厂商"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="vehicleModel"
                                     label="车辆车型"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="vehicleStyle"
                                     label="车辆款型"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="carNo"
                                     label="车牌号"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="vehicleEnergyType"
                                     label="车辆能源类型"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="registrationNature"
                                     label="登记性质"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="applicationType"
                                     label="申请类型"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="leaseTerm"
                                     label="租赁期限(月)"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="rentPaymentMethod"
                                     label="租金支付方式"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="mileageLimit"
                                     label="里程限制（公里)"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="registeredCity"
                                     label="上牌城市"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="registrationFee"
                                     label="上牌费"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="insurancePremium"
                                     label="保险费"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="maintenancePremium"
                                     label="维保费"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="purchaseTax"
                                     label="购置税"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="vehicleAndVesselTax"
                                     label="车船税"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="installationCost"
                                     label="加装费用"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="otherExpenses"
                                     label="其他费用"
                                     min-width="120">
                                 </el-table-column>
                               <el-table-column
                                   align="center"
                                   prop="irr"
                                   label="IRR（含牌照）"
                                   min-width="120">
                                 <template v-slot="{row}">
                                   <template v-if="row.irr">{{row.irr}}%</template>
                                   <template v-else>--</template>
                                 </template>
                               </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="margin"
                                     label="保证金"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="monthlyRent"
                                     label="每期租金"
                                     min-width="120">
                                 </el-table-column>
                               <el-table-column label="首期租金、比例" align="center" prop="firstInstallmentRent" min-width="150px" show-overflow-tooltip>
                                 <template v-slot="{row}">
                                   <template v-if="row.firstInstallmentRentalRatio">
                                     {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                                   </template>
                                   <template v-else>
                                     -- 、--
                                   </template>

                                 </template>
                               </el-table-column>
                               <el-table-column label="残值、比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                                 <template v-slot="{row}">
                                   <template v-if="row.residualValueRatio">
                                     {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                                   </template>
                                   <template v-else>
                                     -- 、--
                                   </template>

                                 </template>
                               </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="suggestedPrice"
                                     label="厂商指导价"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="purchasePrice"
                                     label="新车采购单价"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="currentValuation"
                                     label="旧车当前估值"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     align="center"
                                     prop="numberOfApplications"
                                     label="申请台数"
                                     min-width="120">
                                 </el-table-column>
                                 <el-table-column
                                     prop="numberOfUnitsPassed"
                                     align="center"
                                     label="通过台数"
                                     min-width="160">
                                 </el-table-column>
                                 <el-table-column
                                     prop="rejectedUnits"
                                     align="center"
                                     label="拒绝台数"
                                     min-width="160">

                                 </el-table-column>

                             </el-table>
                         </div>


                         <el-form-item label="说明:" prop="remark">
                             {{ detailInfo.remark|filterNull }}
                         </el-form-item>
                         <el-form-item label="附件:" class="form-img" style="margin-top: 40px">
                             <image-common disabled v-model="detailInfo.annex" :up-type="2"></image-common>
                         </el-form-item>
                     </el-form>

                 </div>
             </common-container>
         </el-col>
            <el-col :span="5">
                <flow-record v-if="detailInfo.flowId" :id="detailInfo.flowId" :custom-style="customerStyle"></flow-record>
            </el-col>
        </el-row>

<!--        <div class="card-wrap flex justify-end card-padding">-->
<!--            <el-button @click="back">返回</el-button>-->
<!--        </div>-->
    </div>
</template>

<script>
import ApprovalInfo from "@/views/letterReview/letterReview/components/ApprovalInfo.vue";
import {getRecordsDetails} from '@/api/letterReview/creditReviewApply'
export default {
    components: {
        ApprovalInfo
    },
    data() {
        // 这里存放数据
        return {
            loading:false,
            customerStyle:'margin:0 0 20px',
            detailInfo: {}
        }
    },
    // 方法集合
    methods: {
        getDetail() {
            this.loading=true
            getRecordsDetails(this.$route.query.applicationNo).then(res => {
                this.detailInfo = res.data
            }).finally(()=>{
                this.loading=false
            })
        },
        back() {
            this.$router.back()
            this.$store.dispatch('tagsView/delView', this.$route)
        }

    },
    // 生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {
        this.getDetail()
    },

}
</script>

<style lang="scss" scoped>
.statisticInfo {
    color: #464646;
    font-size: 14px;
    margin-right: 10px;

    span {
        color: #1884FF;
    }
}

.suggestionInfo {
    position: relative;

    .apprvalStatus {
        position: absolute;
        right: 40px;
        width: 80px;
        height: 80px;
        font-size: 14px;
        text-align: center;
        border-radius: 40px;
        &.active1 {
            color: orange;
            border: orange solid 1px;
        }

        &.active2 {
            color: red;
            border: red solid 1px;
        }

        &.active3 {
            color: green;
            border: green solid 1px;
        }
    }
}

.rightInfo {
    font-size: 14px;
    color: #1890FF;
}

.quota {
    font-size: 14px;
    font-weight: bold;
    color: #606266;
    position: relative;
    left: 20px;

}
</style>
